<script lang="jsx" setup>
import { computed, nextTick, ref } from 'vue';
import dayjs from 'dayjs';
import { coldColumn, hotColumn, mainColumn, pressColumn, unPressColumn } from './column.jsx';
const formList = [
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '时间',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6,
    showTime: true
  }
];

const searchParams = ref({
  time: null
});

const mainSearchData = computed(() => {
  const params = {
    ...searchParams.value,
    subEqpId: 'YH_DZYJ_ZZ'
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

// 冷压
const coldSearchData = computed(() => {
  const params = {
    ...searchParams.value,
    subEqpId: 'YH_DZYJ_CP'
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

// 热压
const hotSearchData = computed(() => {
  const params = {
    ...searchParams.value,
    subEqpId: 'YH_DZYJ_HP'
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

const mainTableRef = ref(null);
const activeKey = ref('1');

// 冷压

const coldTableRef = ref(null);

const hotTableRef = ref(null);

// 装料架
const pressTableRef = ref(null);
const pressSearchData = computed(() => {
  const params = {
    ...searchParams.value,
    subEqpId: 'YH_DZYJ_001'
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

// 卸料架
const unPressTableRef = ref(null);
const unPressSearchData = computed(() => {
  const params = {
    ...searchParams.value,
    subEqpId: 'YH_DZYJ_UD'
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD HH:mm:ss');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD HH:mm:ss');
  }
  delete params.time;
  return params;
});

function reset() {
  nextTick(() => {
    searchParams.value = {
      time: null
    };
    search();
  });
}

function search() {
  mainTableRef.value?.getData(1);
  coldTableRef.value?.getData(1);
  hotTableRef.value?.getData(1);
  pressTableRef.value?.getData(1);
  unPressTableRef.value?.getData(1);
}
</script>

<template>
  <div class="jl-main-page h-full h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      v-model:searchParams="searchParams"
      :form-list="formList"
      @reset="reset"
      @search="search"
    ></CommonSearch>
    <div class="h-full w-full flex gap-8px" style="height: calc(100% - 42px)">
      <div class="h-full w-530px">
        <Table
          ref="mainTableRef"
          v-model:searchParams="mainSearchData"
          :column="mainColumn"
          :show-row-selection="false"
          :auto-generate-uuid="true"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          url="/mes/trace2Gather/pressingDzPress/pageList"
          class="h-full"
          :show-quick-jumper="false"
        >
          <template #title>
            <span class="color-#646cff">大族压机主站</span>
          </template>
        </Table>
      </div>

      <div class="tabs h-full bg-#fff">
        <ATabs v-model:activeKey="activeKey" type="card">
          <ATabPane key="1" tab="大族压机装料架" force-render>
            <Table
              ref="pressTableRef"
              v-model:searchParams="pressSearchData"
              :column="pressColumn"
              :show-row-selection="false"
              :auto-generate-uuid="true"
              :scroll="{ y: 'auto' }"
              is-init-get-data
              url="/mes/trace2Gather/pressingDzPress/pageList"
              class="h-full"
            ></Table>
          </ATabPane>

          <ATabPane key="2" tab="大族压机热压" force-render>
            <Table
              ref="hotTableRef"
              v-model:searchParams="hotSearchData"
              :column="hotColumn"
              :show-row-selection="false"
              :auto-generate-uuid="true"
              :scroll="{ y: 'auto' }"
              is-init-get-data
              url="/mes/trace2Gather/pressingDzPress/pageList"
              class="h-full"
            ></Table>
          </ATabPane>

          <ATabPane key="3" tab="大族压机冷压" force-render>
            <Table
              ref="coldTableRef"
              v-model:searchParams="coldSearchData"
              :column="coldColumn"
              :show-row-selection="false"
              :auto-generate-uuid="true"
              :scroll="{ y: 'auto' }"
              is-init-get-data
              url="/mes/trace2Gather/pressingDzPress/pageList"
              class="h-full"
              :show-quick-jumper="false"
            ></Table>
          </ATabPane>

          <ATabPane key="4" tab="大族压机卸料架" force-render>
            <Table
              ref="unPressTableRef"
              v-model:searchParams="unPressSearchData"
              :column="unPressColumn"
              :show-row-selection="false"
              :auto-generate-uuid="true"
              :scroll="{ y: 'auto' }"
              is-init-get-data
              url="/mes/trace2Gather/pressingDzPress/pageList"
              class="h-full"
            ></Table>
          </ATabPane>
        </ATabs>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tabs {
  width: calc(100% - 530px);
  :deep(.ant-tabs) {
    width: 100%;
    height: 100%;
    .ant-tabs-nav {
      margin-bottom: 0;
    }
    .ant-tabs-content-holder {
      height: calc(100% - 40px);
      .ant-tabs-content {
        height: 100%;
      }
    }
  }
}
</style>
